<template>
  <div>
    <ScreeningAndSorting
      :limitNum="totalSize"
      :screening="screening"
      @orderval="getOrderval"
    />
    <TableList
      :tableData="tableData"
      :btnList="btnList"
      :titleList="titleList"
      :linklist="linklist"
      :isCheck="isCheck"
      @getCheck="getCheck"
    />
    <Footer>
      <template v-slot:choose><Choose :checkVal="checkVal" /></template>
      <template v-slot:paging
        ><Paging :total="totalSize" @getLimit="getLimit" @getPage="getPage"
      /></template>
    </Footer>
  </div>
</template>

<script>
import ScreeningAndSorting from "../../components/ScreeningAndSorting.vue";
import Footer from "../../components/Footer.vue";
import Paging from "../../components/Paging.vue";
import Choose from "../../components/Choose.vue";
import TableList from "../../components/List.vue";
import {
  getUserInfoAxios,
  getCustomerCountByConditionAxios,
} from "../../http/apis/userManageApi";
import { timeFormat, ThisWeekStr } from "../../utils/utils";
import { mapState } from "vuex";
export default {
  name: "UserList",
  components: {
    ScreeningAndSorting,
    Footer,
    Paging,
    Choose,
    TableList,
  },
  data() {
    return {
      totalSize: 0,
      checkVal: [],
      tableData: [],
      screening: [
        {
          name: "已成交",
          num: 0,
        },
        {
          name: "等待打款",
          num: 0,
        },
        {
          name: "确定细节",
          num: 0,
        },
        {
          name: "有意向",
          num: 0,
        },
        {
          name: "潜在客户",
          num: 0,
        },
      ],
      isCheck: true,
      // 表头数据
      linklist: [
        {
          id: 0,
          name: "客户名称",
          isRouter: true,
          url: "/order/clientname",
        },
        {
          id: 1,
          name: "联系人",
          isRouter: false,
        },
        {
          id: 2,
          name: "手机号码",
          isRouter: false,
        },
        {
          id: 3,
          name: "电子邮箱",
          isRouter: false,
        },
        {
          id: 4,
          name: "生日",
          isRouter: false,
        },
        {
          id: 5,
          name: "邮编",
          isRouter: false,
        },
        {
          id: 6,
          name: "客户类型",
          isRouter: false,
        },
        {
          id: 7,
          name: "客户来源",
          isRouter: false,
        },
        {
          id: 8,
          name: "录入时间	",
          isRouter: false,
        },
        {
          id: 9,
          name: "业务员",
          isRouter: false,
        },
      ],
      // 按钮数据
      btnList: [
        {
          id: 0,
          name: "短信",
          type: "客户",
        },
        {
          id: 1,
          name: "邮件",
          type: "客户",
        },
        {
          id: 2,
          name: "修改",
          type: "客户",
        },
        {
          id: 3,
          name: "删除",
          type: "客户",
        },
      ],
      // 模拟数据的属性名
      titleList: [
        "name",
        "contact_name",
        "contact_phone",
        "contact_email",
        "contact_birthday",
        "post_Code",
        "type",
        "origin",
        "import_Date",
        "employee_name",
      ],
      getreqData: {
        currentPage: 1,
        data: {
          importStartForSearch: ThisWeekStr().split(",")[0],
          importEndForSearch: ThisWeekStr().split(",")[1],
        },
        pageSize: 3,
      },
    };
  },
  created() {
    this.getUserInfos();
    this.screening.forEach((item) => {
      getCustomerCountByConditionAxios(item.name)
        .then((res) => {
          item.num = res.data.data;
        })
        .catch(() => {
          console.log("请求失败");
        });
    });
  },
  computed: {
    ...mapState("userManage", ["searchVal"]),
  },
  methods: {
    getPage(val) {
      console.log(val);
      this.getreqData.currentPage = val;
      this.getUserInfos();
    },
    getLimit(val) {
      console.log(val);
      this.getreqData.pageSize = val;
      this.getUserInfos();
    },
    getCheck(val) {
      this.checkVal = val;
    },
    getUserInfos() {
      this.tableData = [];
      getUserInfoAxios(this.getreqData)
        .then((res) => {
          let arr = res.data.data.list;

          arr.forEach((item) => {
            let obj = {
              customer_id: item.customer.customer_id,
              name: item.customer.customer_name,
              contact_name: item.customer.contact[0].contact_name,
              contact_phone: item.customer.contact[0].contact_phone,
              contact_email: item.customer.contact[0].contact_email,
              contact_birthday: timeFormat(
                item.customer.contact[0].contact_birthday
              ),
              post_Code: item.customer.post_Code,
              type: item.customer.type,
              origin: item.customer.origin,
              import_Date: timeFormat(
                item.customer.customer_records.import_date
              ),
              employee_name: item.employee.employee_name,
            };
            //计算每个分类有多少条
            this.tableData.push(obj);
          });
          this.totalSize = res.data.data.totalSize;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getOrderval(val) {
      this.getreqData = {
        ...this.getreqData,
        orderField: val.orderField,
        orderRule: val.orderRule,
        type: val.type,
      };
      this.$set(this.getreqData.data, "type", val.type);
      this.getUserInfos();
    },
  },
  watch: {
    searchVal: function (val) {
      console.log(val);
      this.getUserInfos({
        currentPage: this.getreqData.currentPage,
        data: {
          customer_name: val,
        },
        orderRule: this.orderRule,
        pageSize: this.getreqData.pageSize,
      });
    },
  },
};
</script>

<style>
</style>